<template>
	<view class="passenger-flow">
		<view class="box_9">
			<view style="position: fixed;top: 0;width: 95%;z-index: 99;">
				<view class="listall">
					<v-gap />
					<view class="d-flex flex-column listsee">
						<view class="d-flex flex-row justify-space-between">
							<view class="d-flex flex-row align-center">
								<view class="">
									<image style="width: 80rpx;height: 80rpx;" src="../../static/logo.png" mode="">
									</image>
								</view>
								<view class="d-flex flex-column" style="margin-left: 20rpx;">
									<view class="" style="font-size: 26rpx;">
										张三
									</view>
									<view class="" style="color: #c2c2c2;font-size: 24rpx;">
										138****2323
									</view>
									<view class="" style="color: #c2c2c2;font-size: 24rpx;">
										女 | 28岁
									</view>
								</view>
							</view>
							<view class="d-flex flex-row align-center">
								<view class=""
									style="width: 80rpx;height: 40rpx;background: #eaffe9;color: #7cc57e;font-size: 20rpx;text-align: center;margin-right: 20rpx;line-height: 40rpx;">
									已认证
								</view>
								<!-- <view class="">
									<image style="width: 30rpx;height: 30rpx;" src="../../static/logo.png" mode="">
									</image>
								</view> -->
							</view>
						</view>
						<view class="d-flex flex-row">
							<view class="d-flex flex-column"
								style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;width: 280rpx;">
								<view class="">
									身份证号
								</view>
								<view class="">
									320*************53
								</view>
							</view>
							<view class="d-flex flex-column"
								style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;width: 280rpx;">
								<view class="">
									出生日期
								</view>
								<view class="">
									2010-05-15
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="" style="background-color: #fff;">
					<u-row :gutter="20" >
						<u-col :span="6">
							<view class="box text-center">
								<view class="number">100</view>
								<view>剩余额度</view>
							</view>
						</u-col>
						<u-col :span="6">
							<view class="box text-center">
								<view class="number">2000</view>
								<view>剩余使用天数</view>
							</view>
						</u-col>
					</u-row>
				</view>
				
			</view>
			<view class="" style="margin-top: 490rpx;background-color: #fff;width: 100%;">
				<u-cell-group>
					<u-cell v-for="(item,index) in 5" :key="index">
						<view slot="title">
							<view class="name" style="color: #4f58ff">记录</view>
							<view class="date">2025-10-20</view>
						</view>
						<view slot="value" class="text-right">
							<view class="number" style="color: #ff0000;text-align: right;">
								-1
							</view>
							<view class="rest">剩余:20次</view>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>
<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				filterData: [],
				itemChooselist: {},
				venuelist: [],
				plshow: true,
				weekSelect: [], //选中的
				hylist: [{
						id: '1',
						name: '篮球训练'
					},
					{
						id: '2',
						name: '游泳课程'
					}
				],
				isAllSelect: false, //是否全选
			}
		},
		onLoad(options) {

		},
		methods: {
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			handSelect(item) {

			},

		}
	}
</script>

<style lang="scss" scoped>
	.passenger-flow {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		padding: 0rpx 0 50rpx 0;
		position: relative;

		.box_9 {
			width: 750rpx;
			height: 100%;
			// margin-bottom: 1rpx;
			display: flex;
			flex-direction: column;
			padding:  0 20rpx;
			position: relative;

			.tag-list {
				display: flex;
				margin-top: 30rpx;
				padding: 0 20rpx;

				/deep/ view {
					margin-left: 4rpx;
				}
			}

			.box_11 {
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-direction: row;
				background: #ffffff;
				padding: 0 20rpx;

				// .image-wrapper_7 {
				// 	width: 541rpx;
				// 	height: 60rpx;
				// 	flex-direction: row;
				// 	display: flex;
				// 	margin-top: 15rpx;
				// }
				.image-wrapper_7 {
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					width: 541rpx;
					height: 62rpx;
					flex-direction: row;
					display: flex;
				}

				.label_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 90rpx;
					width: 80rpx;
					top: 27rpx;

					.label_7 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_77 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.label8_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 20rpx;
					width: 80rpx;
					top: 27rpx;

					.label_8 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_88 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}
			}
			
			/deep/.u-row {
				// margin-top: 40rpx;
			
				.box {
					border-radius: 12rpx;
					background-color: #ffffff;
					padding: 40rpx 0;
			
					.number {
						color: #2f75fa;
						margin-bottom: 40rpx;
						font-weight: bold;
					}
				}
			}

			.all_whole {
				width: 100%;
				display: flex;
				flex-direction: column;
				// background: #ffffff;

				.all_whole_be {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding: 0 10rpx;
					margin-top: 20rpx;

					.all_whole_or {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 40%;
						height: 200rpx;
						// border-radius: 20rpx;
					}

					/* 使用类名来设置背景色 */
					.bg-color-all {
						background: #ffffff;
					}

					.bg-color-reading {
						background: #ffffff;
					}

					.bg-color-graduated {
						background: #ffffff;
					}

					.bg-color-potential {
						background: #ffffff;
					}

					.wz-color-all1 {
						font-size: 24rpx;
					}

					.wz-color-all2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-reading2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-graduated2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-potential2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}
				}

				.all_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					color: #c2c2c2;
					font-size: 22rpx;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.all_shuju1 {}

					.all_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.all_shuju2_img {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}
				}

				.alls_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.alls_shuju1 {
						font-size: 28rpx;
					}

					.alls_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.alls_shuju2_img {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}

			.listall {
				.listsee {
					background-color: #fff;
					padding: 30rpx;
					border-radius: 10rpx;
					// width: 98%;
					// margin-left: 2%;
					border-bottom: 1rpx #ebebeb solid;
					// margin-bottom: 20rpx;
				}

				.active1 {
					border: 2rpx #0000ff solid;
				}
			}
			/deep/.u-cell-group {
				.name {
					color: #333;
					font-weight: bold;
				}
			
				.number {
					color: #ff4105;
				}
			
				.date {
					color: #ccc;
				}
			
				.rest {
					color: #9c9c9c;
				}
			
				.rest,
				.date {
					margin-top: 14rpx;
					font-size: 26rpx;
				}
			}
			.onlist {
				padding: 0 20rpx 0 20rpx;
				.item {
					padding: 20rpx 0;
			
					.info-container {
						display: flex;
						// flex-grow: 1;
						align-items: center;
						justify-content: space-between;
						padding-right: 20rpx;
						/* 根据需要调整右边距 */
					}
			
					.name {
						width: 130rpx;
					}
			
					.input-wrapper {
						min-width: 100rpx;
						/* 根据需要设置最小宽度 */
					}
			
					.aligned-input {
						font-size: 22rpx;
						border: 1rpx #e8e8e8 solid;
						padding-left: 10rpx;
						width: 200rpx;
						/* 使输入框填充整个容器 */
						box-sizing: border-box;
						/* 确保内边距和边框计入元素总宽度 */
					}
			
					.tag {
						margin-left: 10rpx;
					}
			
					.phone {
						color: #BEBEBE;
						font-size: 26rpx;
						margin-top: 13rpx;
					}
				}
			}

		}
	}
</style>